<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>SoCo - Sonos Web Controller</title>

        <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
        <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet">
    </head>
    <body class="container">
	    <p id="track-all"></p>
        <div class="row">
            <div class="span7 card">
                <img id="track-image" src="{{ track.image }}" >
            </div>
            <div class="span5">
                <h1 id="track-title"></h1>
                <h2 id="track-artist"></h2>
                <h2 id="track-album"></h2>
				<p id="track-lyrics" class="lyrics"></p>
            </div>
        </div>

        <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>

        <script type="text/javascript">
            var currTrack = '';
            var playing = true;
            var n = 0

            function checkChange() {
                $.getJSON('http://127.0.0.1:5000/info-light').done(function(data) {
                    $('#track-title').text(data['title']);

                    if (currTrack != data['title'])
                    {
                        loadData();
                        n = 0;
                    }
                    
                    else {$.getJSON('http://127.0.0.1:5000/images').done(function(data) {

					console.log(n)
					console.log(data[n]['image']['width']);
					console.log(data[n]['image']['height']);
					console.log(data[n]['link']);
				
<!--$('.card').html('<span class="image-wrap card" style="position:relative; display:inline-block; background:url(' + data[n]['link'] + ') no-repeat center center; width: '+ data[n]['image']['width'] +'px; height: '+ data[n]['image']['height'] +'px ;" /><img style="opacity:0" id="track-image" src="' + data[n]['link'] + '"></span>')-->

$('.card').html('<span class="image-wrap card" style="position:relative; display:inline-block; background:url(' + data[n]['link'] + ') no-repeat center center; width: 500px; height: '+ data[n]['image']['height'] +'px ;" /><img style="opacity:0" id="track-image" src="' + data[n]['link'] + '"></span>')


<!--$('.card').html('<span class="image-wrap card" style="position:relative; display:inline-block; background:url(' + zzz[n].link + ') no-repeat center center; width: 400px; height: 400px;" /><img style="opacity:0" id="track-image" src="' + zzz[n].link + '"></span>');-->
                n+=1;

                if (n==9) {n=0;}

                });
                
                 }

                });
            }

            function loadData() {
                $.getJSON('http://127.0.0.1:5000/info').done(function(data) {
                    $('#track-title').text(data['title']);
                    $('#track-artist').text(data['artist']);
                    $('#track-album').text(data['album']);
					$('#track-all').text(data['title']+' '+data['artist']+' '+data['album']+' '+data['date']);
					$('#track-lyrics').text(data['lyrics']);
                    $('.card').empty();
                    $('.card').html('<span class="image-wrap card" style="position:relative; display:inline-block; background:url(' + data['album_art'] + ') no-repeat center center; width: 400px; height: 400px;" /><img style="opacity:0" id="track-image" src="' + data['album_art'] + '"></span>');

                    currTrack = data['title'];
                });
            }

            $(document).ready(function() {
                loadData();

                $("img").load(function() {
                    $(this).wrap(function(){
                        return '<span class="image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' +  $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
                });

                    $(this).css("opacity","0");

                });

                setInterval("checkChange()", 10000);

                $('#next').click(function() {
                    $.ajax('http://127.0.0.1:5000/next');
                    loadData();
                });

                $('#previous').click(function() {
                    $.ajax('http://127.0.0.1:5000/previous');
                    loadData();
                });

                $('#pause').click(function() {
                    if (playing == true)
                    {
                        $.ajax('http://127.0.0.1:5000/pause');
                        playing = false;

                        $('#pause').html('<i class="icon-play"></i> Play');
                    }
                    else {
                        $.ajax('http://127.0.0.1:5000/play');
                        playing = true;

                        $('#pause').html('<i class="icon-pause"></i> Pause');
                    }
                });
            });
        </script>
   </body>
</html>
